<html>

<head>
    <title>OpenGlobus - Earth planet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/og.css" type="text/css" />
</head>

<body>
    <div id="globus" style="width:100%;height:100%"></div>
    <script type="module">
        'use strict';

        import { Globe } from '../../src/og/Globe.js';
        import { XYZ } from '../../src/og/layer/XYZ.js';
        import { Popup } from '../../src/og/Popup.js';
        import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';

        var osm = new XYZ("OpenStreetMap", {
            isBaseLayer: true,
            url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            visibility: true,
            attribution: 'Data @ OpenStreetMap contributors, ODbL'
        });

        var globe = new Globe({
            target: "globus",
            name: "Earth",
            layers: [osm],
            terrain: new GlobusTerrain()
        });

        let myPopup = new Popup({
            planet: globe.planet,
            offset: [0, -25],
            visibility: false
        });

        globe.planet.renderer.events.on("lclick", (e) => {
            let lonLat = globe.planet.getLonLatFromPixelTerrain(e);

            globe.planet.terrain.getHeightAsync(lonLat, (h) => {
                myPopup.setContent(`lon = ${lonLat.lon.toFixed(5)}<br/>lat = ${lonLat.lat.toFixed(5)}<br/>height(msl) = ${Math.round(h)} m`);
            });

            let groundPos = globe.planet.getCartesianFromMouseTerrain();
            myPopup.setCartesian3v(groundPos);

            myPopup.setVisibility(true);
        });

    </script>
</body>

</html>